<template>
  <div class="Practice">
      <div>
        <van-nav-bar
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
          :title="`${cont} /${list.length}`"
        >
        <template #right>
           <van-count-down :time="time" />
       </template>

        </van-nav-bar>
      </div>
    <div class="subject">
        <p
        class="title"
        >{{cont}}.  {{question.question}}</p>

        <!-- <p>选择框</p> -->
        <van-radio-group v-model="radio">
          <van-radio
          :name="i"
          v-for="(v, i) in question.answer"
          :key="v"
          @click="vtn"
          >
          {{i+1}}.{{v}}
          </van-radio>
        </van-radio-group>
    </div>
    <div class="divwith">
      <div class="right_answer_daan" v-if="check">
        <div  class="content">正确答案是{{+question.right_answer+1}}</div>
      </div>
      <van-button
      round
      type="info"
      @click="preview"
      class="margin50px left"
      :disabled="listIndex === 0"
      >
      上一题
      </van-button>
      <van-button
       round
       type="info"
       @click="next"
       class="margin50px right"
       :disabled="list.length === listIndex+1">
       下一题
       </van-button>
        <van-button
         type="info"
         class="with"
         v-if="list.length === listIndex+1"
         @click="btnOk"
        >
        完成
        </van-button>
      </div>
      <van-popup
      v-model="show"
      round
      closeable
      close-icon="close"
      class="tanceng"
      >
      <div class="top">
        练习完成
      </div>
      <div class="body">
        <h1>结 果</h1>
        <span>正确：{{truequestion}}</span>
        <span>错误：{{falsequstion}}</span>
      </div>
      <van-button type="info" to="/Safe" class="btn">确定</van-button>
      </van-popup>
  </div>
</template>

<script>
import { topicAll } from '../../api/Safe'
export default {
  name: 'Practice',
  data () {
    return {
      time: 45 * 60 * 1000,
      cont: 1,
      list: [],
      radio: '',
      listIndex: 0,
      falsequstion: 0,
      truequestion: 0,
      check: false,
      show: false
    }
  },
  created () {
    this.topicAll()
  },
  computed: {
    question () {
      if (this.list.length === 0) {
        return {}
      }
      return this.list[this.listIndex]
    }
  },
  methods: {
    async topicAll () {
      // console.log(await topicAll())
      const { data } = await topicAll()
      this.list = data
      console.log(this.list)
      //   this.list = data
    },
    vtn () {
      this.check = true
    },
    preview () {
      this.listIndex--
      this.cont--
      this.radio = ''
      this.check = false
    },
    next () {
      this.cont++
      if (+this.question.right_answer === this.radio) {
        // console.log(i, 'i')
        this.truequestion += 1
        console.log(this.truequestion, 'true')
        console.log(this.radio, +this.question.right_answer, '正确')
        this.listIndex++
        this.radio = ''
        this.check = false
        return true
      } else {
        // console.log(i)
        this.falsequstion += 1
        console.log(this.falsequstion, 'false')
        console.log(this.radio, +this.question.right_answer, '错误')
        // console.log(this.question.right_answer)
        this.listIndex++
        this.radio = ''
        this.check = false
        return false
      }
    },
    onClickLeft () {
      console.log(this.topicAll())
      this.$router.back()
    },
    btnOk () {
      if (+this.question.right_answer === this.radio) {
        // console.log(i, 'i')
        this.truequestion += 1
        console.log(this.truequestion, 'true')
        console.log(this.radio, this.question.right_answer, '正确')
        this.show = true

        return true
      } else {
        // console.log(i)
        console.log(this.radio, this.question.right_answer, '正确')
        this.falsequstion += 1
        console.log(this.falsequstion, 'false')
        // console.log(this.question.right_answer)
        this.show = true

        return false
      }
    }
  }
}
</script>

<style scoped lang="less">
.right_answer_daan {
  position: fixed;
  bottom: 23%;
  left: 5%;
  width: 90%;
  height: 200px;
  border: 5px dashed #fff;
  background: linear-gradient(to bottom, #ff0077, #f84521);
  font-size: 35px;
  .content {
  height: 200px;
  width: 100%;
  background-color: #fff;
}
}
 .img-icon {
    height: 20px;
  }
.subject{
  margin-bottom: 20px;
  .title {
      font-size: 45px;
      margin: 50px 100px 100px 0;
  }
  .van-radio-group {
    .van-radio {
        font-size: 35px;
        margin: 50px;
    }
  }
}
.margin50px {
    margin: 50px;
}
.left {
    position: fixed;
    left: -40px;
    bottom: 130px;
}
.right {
    position: fixed;
    right: -40px;
    bottom: 130px;
}
.divwith {
    width: 100%;
    position: fixed;
    bottom: 0;
}
.with {
    width: 100%;
    height: 100px;
    font-size: 35px;
}
.tanceng {
  width: 500px;
  height: 50%;
  background: rgb(252, 252, 252);
  .top {
    width: 500px;
    height: 100px;
    background-color: rgb(25, 137, 250);
    font-size: 45px;
    text-align: center;
    line-height: 100px;
  }
  .body {
    width: 80%;
    height: 50%;
    margin-top: 5%;
    margin-left: 10%;
    border: 2px solid #ccc;
    text-align: left;
    font-size: 35px;
    h1 {
      text-align: center;
      font-size: 35px;
    }
    span {
      display: block;
      height: 50px;
      margin-top: 10px;
    }
  }
  .btn {
    margin-left: 37%;
  }
}
</style>
